<template>
  <el-tabs v-model="activeName" class="PropStyleTabs" @tab-change="handleClick">
    <el-tab-pane label="线条" name="line_style">
      <LineStyleProp ref="lineTab"/>
    </el-tab-pane>
    <el-tab-pane label="填充" name="fill_style">
      <FillStyleProp ref="fillTab"/>
    </el-tab-pane>
    <el-tab-pane label="位置" name="coord_prop">
      <coordTable ref="coordTab" />
    </el-tab-pane>
    <!-- <el-tab-pane label="台账" name="dev_prop">
      <PropTable ref="propTab" />
    </el-tab-pane> -->
  </el-tabs>
</template>


<script  setup>
import { ref,onMounted } from 'vue'
import PropTable from './PropTable.vue';
import LineStyleProp from './LineStyleProp.vue'
import FillStyleProp from './FillStyleProp.vue'
import coordTable from  './coordTable.vue'

const activeName = ref('line_style')
const propTab = ref(null)
const coordTab = ref(null)
const lineTab = ref(null)
const fillTab = ref(null)

onMounted(() => {
    console.log("propStyle onMounted");
    window.mainctl.appendSelGraphListner(window.propStyleTab.value);
})

const handleClick = (tab, event) => {
  let tabName = activeName.value;
  console.log(tabName);
  if (tabName == "dev_prop"){
    propTab.value.initDatas();
  }
  else if (tabName == "coord_prop"){
    coordTab.value.initDatas();
  }
  else if (tabName == "fill_style"){
    fillTab.value.initDatas();
  }
  else if (tabName == "line_style"){
    let t = lineTab.value;
    console.log(t);
    lineTab.value.initDatas();
  }
}

var initDatas = function(evt){
  let tabName = activeName.value;
  console.log(tabName);
  if (tabName == "dev_prop"){
    propTab.value.initDatas();
  }
  else if (tabName == "coord_prop"){
    coordTab.value.initDatas();
  }
  else if (tabName == "fill_style"){
    fillTab.value.initDatas();
  }
  else if (tabName == "line_style"){
    let t = lineTab.value;
    console.log(t);
    lineTab.value.initDatas();
  }
}

var notifySelGraph = function (mousePoint, list) {
    console.log("propStyle dlg act2PickGraphs --------------");
    let tabName = activeName.value;
    if (tabName == "fill_style"){
      fillTab.value.notifySelGraph(mousePoint, list);
    }
    else{
      this.initDatas();
    }
}

defineExpose({
    initDatas,
    notifySelGraph,
    onMounted
});

</script>
<style>
.PropStyleTabs>.el-tabs__content {
  padding: 2px;
  color: #6b778c;
  font-size: 8px;
  font-weight: 600;
}
</style>
  
  
  